<template>
	<view class="blindBox">
		<u-navbar
			title=""
			placeholder
		>
		<view slot="left" class="navLeft">盲盒</view>
		<view slot="center" class="navCenter" @click="toPage('/pages/BlindBox/search')">
			<u--input
			    style="margin-left: 15rpx;"
			    border="none"
			    placeholder="输入盲盒名称"
			    prefixIcon="search"
				:disabled="true"
				disabledColor="#fff"
			    prefixIconStyle="font-size: 22px;color: #909399"
			></u--input>
		</view>
		</u-navbar>
		<view class="content" v-if="mhlist.length > 0">
			<view class="item" v-for="(item ,i) in mhlist" :key="i" @tap="toDetailorShowDialog(item)">
				<view class="img">
					<!-- <view class="ts">{{item.num>0?current==0?'首发售卖中':'售卖中':'已售罄'}}</view> -->
					<view class="boximg">
						<u--image :src="item.thumb" :fade="true" duration="450" width='100%' height="322rpx"
							:lazy-load="true" mode="aspectFill">
							<template v-slot:loading>
								<u-loading-icon color="#468EFF"></u-loading-icon>
							</template>
						</u--image>
						<!-- <image  @load="imageLoad(mhlist,item.thumb,i,'thumb')" :src="item.thumb" mode="aspectFill"></image>	 -->
					</view>
					<view v-if="item.num>0" class="count-down">
						<image src="@/static/images/count-down-bg.png" mode=""></image>
						<text>售卖中</text>
					</view>
					<view v-if="item.num == 0" class="sell-out">
						<image src="@/static/images/sell-out.png" mode=""></image>
						<text class="sell-out-text">盲盒售罄</text>
					</view>
				</view>
				<view class="goodsInfo">
					<view class="left">
						<view class="title">{{ item.title }}</view>
						<!-- <view class="userinfo">
							<view class="avatar">
								<image :src="item.portrait" mode="aspectFit"></image>
							</view>
							<view class="username">
								{{item.user_name?item.user_name:item.nickname}}
							</view>
						</view> -->
					</view>
					<view class="right">
						<view class="price">
							<text class="rmb">¥</text>
							<text>{{ item.price?item.price:item.base_price }}</text>
						</view>
						<!-- <view v-if="current === 0" class="count">
							<text>限量: {{ item.all_count }}份</text>
						</view>
						<view class="info u-label" v-if="current==1">
							{{item.goodsCode+'/'+item.allCount}}
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<Empty v-else text="暂无盲盒"></Empty>
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	import Empty from "@/components/Empty.vue"
	export default {
		mixins: [mixin],
		components: {
			Empty
		},
		data() {
			return {
				page2: 1,
				size: 10,
				mhlist: [],
			}
		},
		onLoad() {
			this.getBoxList()
		},
		onPullDownRefresh() {
			this.page2 = 1
			this.getBoxList()
		},
		onShow() {
			let token=uni.getStorageSync('token')
			if(!token){
				uni.navigateTo({
					url: '/pages/Login/index'
				})
			}
		},
		methods: {
			toDetailorShowDialog (item) {
				this.toPage('/subpage/Product/boxDetails?id=' + item.id+'&type=2');
			},
			// 获取盲盒列表
			async getBoxList() {
				let data = await this.$http({
					url: this.$api.specialList,
					method: 'get',
					hideLoading: true,
					data: {
						page: this.page2,
						page_size: this.size,
						sell_status: 1,
						type: 2
					}
				})
				let list = data.data
				if (data.code == 200) {
					if (this.page2 == 1) {
						this.mhlist = []
					}
					this.total = list.total
					if (this.mhlist.length < list.total) {
						this.mhlist = this.mhlist.concat(list.data)
						this.page2 += 1
					}
				} else {
					return []
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.blindBox {
	margin: 30rpx;
	.navLeft {
		font-size: 36rpx;
		font-weight: 600;
		color: #292A40;
	}
	.navCenter {
		display: flex;
		align-items: center;
		width: 590rpx;
		height: 80rpx;
		background: #F5F5FA;
		border-radius: 40rpx;
		margin-left: 80rpx;
		overflow: hidden;
		.u-input {
			background: #F5F5FA !important;
		}
	}
	.content {
		display: flex;
		flex-wrap: wrap;
		.item {
			background: #FFFFFF;
			// box-shadow: 2px 2px 8px 3px rgba(230, 230, 230, 0.5);
			border-radius: 2rpx;
			// overflow: hidden;
			margin-bottom: 30rpx;
			width: calc(50% - 18rpx);
			margin: 11rpx 12rpx 11rpx 6rpx;
		
			.img {
				position: relative;
				
				.count-down {
					position: absolute;
					right: 0;
					top: 0;
					width: 140rpx;
					height: 40rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					image {
						width: 100%;
						height: 100%;
					}
					text {
						position: absolute;
						top: 0;
						right: 10%;
					}
				}
				
				.sell-out {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 132rpx;
					height: 127rpx;
					image {
						width: 100%;
						height: 100%;
					}
					.sell-out-text {
						display: block;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 52rpx;
						height: 66rpx;
						font-size: 24rpx;
						font-weight: 600;
						color: #FFFFFF;
						text-align: center;
						white-space:normal;
					}
				}
		
				.boximg {
					width: 100%;
					height: 322rpx;
					overflow: hidden;
					background: url(@/static/images/shopbg.png) no-repeat;
					background-size: cover;
				}
		
				.ts {
					min-width: 90rpx;
					height: 48rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 24rpx;
					opacity: 0.8;
					padding: 0 15rpx;
					position: absolute;
					top: 18rpx;
					left: 16rpx;
					z-index: 1;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
				}
		
				.tys {
					position: absolute;
					border-radius: 8rpx;
					bottom: 10rpx;
					left: 16rpx;
					display: flex;
					align-items: center;
					z-index: 1;
		
					.txt {
						border-radius: 4rpx;
						width: 60rpx;
						height: 30rpx;
						padding: 5rpx;
						color: #FFF;
						background: #000;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						margin-right: 10rpx;
					}
		
					.txt:nth-child(2n) {
						background: #50E3C2;
						color: #FFF;
					}
				}
		
				.status {
					display: flex;
					align-items: center;
					position: absolute;
					left: 34rpx;
					top: 48rpx;
					padding: 8rpx 12rpx;
					background: #141516;
					border-radius: 19rpx;
					font-size: 24rpx;
					font-weight: 600;
					color: #8F8F8F;
		
					text {
						margin-left: 12rpx;
					}
		
					&.next {
						color: #F3E0BC;
		
						::v-deep .u-icon__icon {
							color: #F3E0BC !important;
						}
		
						::v-deep .u-count-down__text {
							font-size: 24rpx;
							font-weight: 600;
							color: #F3E0BC;
						}
		
					}
				}
			}
			
			.goodsInfo {
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				padding: 0 12rpx;
				box-sizing: border-box;
				margin-top: 10rpx;
				.left {
					// width: 50%;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					.title {
						overflow: hidden;
						text-overflow: ellipsis;
						font-weight: 600;
						color: #101010;
						font-size: 28rpx;
					}
					.userinfo {
						display: flex;
						align-items: center;
						margin-top: 10rpx;
						.avatar {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 32rpx;
							height: 32rpx;
							// border: 1rpx solid #ccc;
							border-radius: 50%;
							margin-right: 8rpx;
							image {
								width: 100%;
								height: 100%;
							}
						}
						.username {
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: 400;
							color: #A1A1AB;
							font-size: 24rpx;
						}
					}
				}
				.right {
					overflow: hidden;
					display: flex;
					flex-direction: column;
					// align-items: flex-end;
					.price {
						color: #101010;
						font-weight: bold;
						font-size: 36rpx;
						.rmb {
							font-size: 20rpx;
						}
					}
					.current2 {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 120rpx;
						height: 52rpx;
						background: #468EFF;
						border-radius: 8rpx;
						color: #fff;
						padding: 14rpx;
						box-sizing: border-box;
						font-size: 24rpx;
					}
					.info {
						font-size: 24rpx;
					}
					.count {
						font-weight: 400;
						color: #A1A1AB;
						font-size: 24rpx;
						// margin-top: 16rpx;
					}
				}
			}
			
			.item_cont {
				border-radius: 0 0 60rpx 60rpx;
				padding: 12rpx 18rpx 30rpx;
		
				.info {
					display: flex;
					justify-content: space-between;
					align-items: center;
		
					.title {
						font-size: 28rpx;
						font-weight: 600;
						color: #000;
						line-height: 46rpx;
						flex: 1;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
		
					.price {
						margin-top: 10rpx;
		
						.dw {
							font-size: 17rpx;
						}
		
						font-size: 32rpx;
						font-weight: 900;
						color: #000;
						line-height: 56rpx;
					}
				}
		
				.u-label {
					width: 146rpx;
					height: 36rpx;
					background: linear-gradient(90deg, #9C9C9C 0%, #3B3B3B 100%);
					border-radius: 4rpx;
					font-size: 20rpx;
					font-weight: 600;
					color: #FFFFFF;
					justify-content: center;
					margin-top: -8rpx;
					margin-bottom: 15rpx;
				}
		
				.tags {
					display: flex;
					align-items: center;
		
					image {
						width: 36rpx;
						height: 32rpx;
						margin: 5rpx 10rpx;
					}
		
					text {
						width: calc(100% - 36rpx);
						font-size: 20rpx;
						font-weight: 600;
						color: #6B5931;
					}
		
					line-height: 36rpx;
					border-radius: 8rpx;
					background: #FAEAC5;
					color: #6B5931;
					text-align: left;
		
				}
		
				.btm {
					display: flex;
					align-items: center;
		
					image {
						height: 36rpx;
						width: 36rpx;
						border-radius: 100%;
						margin-right: 15rpx;
						background: #f8f8f8;
					}
		
					.name {
						font-size: 24rpx;
						font-weight: 600;
						color: #222;
						line-height: 34rpx;
						flex: 1;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
		
					.price {
						margin-top: 10rpx;
		
						.dw {
							font-size: 17rpx;
						}
		
						font-size: 32rpx;
						font-weight: 900;
						color: #000;
						line-height: 56rpx;
					}
				}
			}
		}
	}
}
</style>
